<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>职称管理</title>
    <link rel="stylesheet" href="/css/element.css" />
  </head>
  <body>
    <script src="/js/Vue.js"></script>
    <script src="/js/element.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/Qs.js"></script>
    <script type="text/javascript" src="/js/layer.js"></script>
    <style>
      #app {
        height: 100%;
      }
      #search .el-card__body {
        height: auto;
        margin-bottom: -10px;
      }
      #tools .el-card__body {
        padding: 5px 5px 5px 10px;
      }
      #table {
        height: calc(100% - 144px);
      }
      .layui-layout-admin .layui-body .layadmin-tabsbody-item {
        padding: 5px;
      }

      #tools .el-button {
        padding: 10px 8px 10px 5px;
        background-color:whitesmoke !important;
        color: black !important;
        border: none !important;
      }
      /* .el-button {
        margin-left: 0 !important;
      } */
      .el-input__inner {
        height: 38px;
      }

      .text {
        font-size: 14px;
      }

      .item {
        padding: 18px 0;
      }

      .el-card {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 2px;
      }

      .el-table_1_column_5:hover {
        cursor: pointer;
        border-bottom: 2px solid #409eff;
      }
      /*翻页样式*/
      .el-pagination {
        margin-top: 5px;
      }
      .el-form-item label{
        text-align: right !important;
        width: 80px !important;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        color: #606266;
        line-height: 40px;
        padding: 0 12px 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }
      .el-form-item__content {
      line-height: 40px;
      font-size: 14px;
      }
      .el-button--medium{
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 4px;
      }
      .rearch_btn
      {
        position: absolute;
        right: 0px;
      }
      #navcrumb {height: 40px;}
    </style>
    <div id="app">
      <!-- 当前页面位置 -->
      <el-card id="navcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{path:'/'}">系统首页</el-breadcrumb-item>
          <el-breadcrumb-item>通用数据</el-breadcrumb-item>
          <el-breadcrumb-item>职称管理2</el-breadcrumb-item>
        </el-breadcrumb>
      </el-card>
      <!--查询框-->
      <el-card id="search">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="系列名称 ">
            <el-input v-model="name" placeholder="请输入查询内容" style="width:165px;" clearable></el-input>
          </el-form-item>
          <el-form-item label="正高级" >
            <el-input v-model="senior1"   placeholder="请输入查询内容" style="width:165px;" clearable></el-input>
        </el-form-item>
        <el-form-item label="副高级">
            <el-input v-model="subSenior1"  placeholder="请输入查询内容" style="width:165px;"  clearable></el-input>
        </el-form-item>
        <el-form-item label="中级">
            <el-input v-model="intermediate1"   placeholder="请输入查询内容" style="width:165px;" clearable></el-input>
        </el-form-item>
        <el-form-item label="初级">
            <el-input v-model="junior1"  placeholder="请输入查询内容" style="width:165px;" clearable></el-input>
        </el-form-item>
        <el-form-item label="员级">
            <el-input v-model="staff1"  placeholder="请输入查询内容" style="width:165px;" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属类型">
          <el-select v-model="unit" style="width:165px;">
            <el-option
              v-for="item in categoryList"
              :key="item.categoryId"
              :label="item.categoryName"
              :value="item.categoryId"
              ></el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="选择日期">
      </el-form-item>
      <el-date-picker v-model="selectdatetime" type="datetime" placeholder="选择时间" style="width:165px;margin-left: -16px;" @change="dataSearch" 
      value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      <el-form-item class="rearch_btn">
            <el-button 
              size="medium"
              type="primary"
              @click="asSearchHandle"
              size="large"
              >查询</el-button >
          </el-form-item>
        </el-form>
      </el-card>
      <!--工具栏-->
      <el-card id="tools">
        <el-row>
          <el-button
            size="normal"
            icon="el-icon-document-add"
            type="primary"
            @click="addJobtitleAction"
          >
            增加系列
          </el-button>
          <el-button
          size="normal"
          icon="el-icon-delete"
          type="primary"
          @click="changSelectUserState"
        >
           删除系列
        </el-button>
        <el-popconfirm></el-popconfirm>
          <el-button
            size="normal"
            icon="el-icon-document"
            type="primary"
            @click="importJobtitleAction"
          >
            批量导入
          </el-button>
        </el-row>
      </el-card>
      <!--    查询数据展示表格-->
      <el-card id="table">
        <el-table
          border
          :stripe="true"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :select-on-indeterminate="false"
          :key="updatakey"
        >
          <el-table-column
          type="selection">
          </el-table-column>
          <el-table-column label="系列名称" prop="name"  align="center"/>
          <el-table-column label="正高" prop="senior"  align="center" />  
          <el-table-column label="副高" prop="subSenior" align="center" />  
          <el-table-column label="中级" prop="intermediate" align="center" />  
          <el-table-column label="初级" prop="junior" align="center" />  
          <el-table-column label="员级" prop="staff" align="center" />
          <el-table-column label="状态" prop="state?'正常':'删除'" align="center"> 
            <template slot-scope="scope">
              {{scope.row.state|strState}}
           </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="320">
            <template slot-scope="scope">
                <!-- "isTemplate"为true 则显示 编辑模板按钮-->
                <el-link v-if="scope.row.isTemplate" icon="el-icon-edit-outline" @click="sceneNameEditAction(scope.$index, scope.row)" type="success">修改场景名称</el-link>
                <el-link icon="el-icon-edit-outline" @click="editJobtitleAction(scope.$index,scope.row)" type="primary">修改</el-link>
                <el-popconfirm title=" 确定要删除该系列吗？" @confirm="delJobTitle(scope.$index, scope.row)">
                    <el-link slot="reference" icon="el-icon-delete" type="danger">删除</el-link>
                </el-popconfirm>
            </template>
        </el-table-column>
        </el-table>
        <!--        页码-->
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total,prev, pager, next, jumper"
          :total="totaldata"
        >
        </el-pagination>
      </el-card>
    </div>
    <script src="/js/formDataUtils.js"></script>
    <script>
      var addwindow = null;
      var editwindow = null;
      var uploadwindow = null;
      var testupload=null;  
      var sceneData = new Object();
      var that;
      var asid;
      var vue = new Vue({
        el: "#app",
        data(){
          return {
          testname:'',//测试用 
          testurl:'',//测试用 
          name:'',
          selectdatetime:'',
          addname:'',
          editname:'',
          senior:'',
          subSenior:'',
          intermediate:'',
          junior:'',
          staff:'',
          senior1:'',
          subSenior1:'',
          intermediate1:'',
          junior1:'',
          staff1:'',
          addusername:'',
          addnickname:'',
          editusername:'',
          editnickname:'',
          unit:'',//这个值不设置控件显示不会更新
          updatakey:false,    
          //翻页相关数据
          totaldata:4,
          currentPage: 1,
          pageSize: 10,
          
          //查询数据
          searchForm: {
            categoryid: "",
            keyword: "",
          },
          file: "",
          //文件列表
          fileList: [],
          //预案类型
          categoryList: [{categoryName:'全部',categoryid:0},{categoryName:'系统职称',categoryid:1},
          {categoryName:'自定义职称',categoryid:2}],
          //表格数据选中seltion数据
          multipleSelection: [],
          }
        },

        filters:{
          strState:function(state){
				switch(parseInt(state)){
					case 0:
						return '删除';
					case 1:
						return '启用';
					default :
						return '未知';
				}
			}
		},
    mounted() {
            const that = this;
            //查询所有的场景
            this.asSearch();
        },

        // filters: {
        //   asType(val) {
        //     const typeArray = that.categoryList;
        //     for (let i = 0; i < typeArray.length; i++) {
        //       if (typeArray[i].categoryId == val) {
        //         return typeArray[i].categoryName;
        //       }
        //     }
        //   },
        // },
        // beforeCreate() {
        //   that = this;
        // },
        // mounted() {
        //   //获取所有预案类别
        //   this.getCategory();
        //   //默认进入页面时查询预案
        //   this.asSearch();
        // },
        methods: {
          //查询时间
          dataSearch() {
      //this.getListByDataTime();
    },
          //删除预案
          deleteAssumption() {
            const that = this;
            const LIST = this.multipleSelection;
            if (LIST.length >= 1) {
              layer.confirm(
                "确定要删除吗？",
                { icon: 3, title: "警告" },
                function (index) {
                  let result_arr = [];
                  for (let i = 0; i < LIST.length; i++) {
                    result_arr.push(LIST[i].asid);
                  }
                  let id = result_arr.join(",");
                  //发送删除预案请求
                  let params = new FormData();
                  params.append("id", id);
                  axios
                    .post("/assumption/delete", params)
                    .then((res) => {
                      if (res.data.success) {
                        that.$message.success("删除成功！");
                        //纠正页页码
                        that.deleteCorrect(that.tableData, result_arr.length);
                        //刷新页面
                        that.asSearch();
                      } else {
                        that.$message.error(res.data.message);
                      }
                    })
                    .catch((err) => {
                      console.log(err);
                    });
                  //关闭提醒框
                  layer.close(index);
                }
              );
            } else {
              layer.alert("请勾选预案后再点击删除！");
            }
          },
          //最后一页最后一条数据删除时，页码纠正
          deleteCorrect(data, namuber) {
            const totalPage = Math.ceil(
              (data.length - namuber) / this.pageSize
            ); // 总页数
            this.currentPage =
              this.currentPage > totalPage ? totalPage : this.currentPage;
            this.currentPage = this.currentPage < 1 ? 1 : this.currentPage;
          },
          //新建职称弹出窗口
          addJobtitleAction() {
            const that = this;
            //打开弹窗
            addwindow = layer.open({
            type: 2,
            title: "新建职称",
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: ["533px", "500px"],
            content: "/dialog/general/addjobtitle.html",
            btn:['新建'],
            yes:()=>
            {
              //alert('有未填写的项目!');
              console.log(that.addname);
              if(that.addname&&that.senior&&that.subSenior&&that.intermediate&&that.junior&&that.staff)
                {

                  layer.close(addwindow);
                  that.addNewJobTitle(that.addname,that.senior,that.subSenior,that.intermediate,that.junior,that.staff);
                }
                else 
                {
                    alert('有未填写的项目!');
                }
            },
            cancel: function () {
                      that.addname='';
                      that.senior='',
                      that.subSenior='',
                      that.intermediate='',
                      that.junior='',
                      that.staff=''
                      console.log('cancel...')
            },
                  end: () => {
                      if(this.addname&&this.senior&&this.subSenior&&this.intermediate&&this.junior&&this.staff)
                      {
                          //console.log('增加系列名称:'+this.addname);
                      }
                      else 
                      {
                          console.log('end...')
                      }
                      //this.searchAllScene();
                      //sceneData = {};
                  }
            });
          },

          //新建职称
          addNewJobTitle(addname,senior,subSenior,intermediate,junior,staff) {
              let params = {
                  name:addname,
                  senior:senior,
                  subSenior:subSenior,
                  intermediate:intermediate,
                  junior:junior,
                  staff:staff
              }
              var that = this;
          $.post('syatem/add_Title', params, function (data) {
                  //console.log(data);
                  if(data.success)
                  {
                      console.log('sucess~');
                      that.asSearch();
                      that.updatakey=!this.updatakey;
                  }
                  else 
                  {
                      console.log('error!!!'+data.message);
                      //alert(data.message);
                  }
                  //console.log(data.data.content);
                  //刷新表格
              })
            }, 

          //弹出编辑职称窗口
          editJobtitleAction(index, row) {
          //场景id赋值
          //console.log(index);
          //console.log(row);
          sceneId = row.titleid;
          //数据回显赋值
          sceneData = row;
          //打开弹窗
          this.editname = row.name;
          var that = this;
          editwindow=layer.open({
              type: 2,
              title: '修改',
              shadeClose: true,
              shade: false,
              maxmin: false, //开启最大化最小化按钮
              area: ['400px', '500px'],
              content: '/dialog/general/editjobtitle.html',
              btn:['修改'],
              yes:()=>
              {
                if(!that.editname||!that.senior||!that.subSenior||!that.intermediate||!that.junior||!that.staff)
                {
                  layer.$message('有未填写的项目!');
                }
                else 
                {
                  layer.close(editwindow);
                  console.log('更新职称ID:'+sceneId);
                  that.editJobtitle(sceneId,that.editname,that.senior,that.subSenior,that.intermediate,that.junior,that.staff);
                }
              },
              cancel: function () {
                  console.log('cancel...')
        },
              end: () => {
                      console.log('end...')
                  //this.searchAllScene();
                  //sceneData = {};
              }
          });
      },

        //编辑职称
        editJobtitle(titleid,name,senior,subSenior,intermediate,junior,staff) {
            let params = {
                titleid:titleid,
                name:name,
                senior:senior,
                subSenior:subSenior,
                intermediate:intermediate,
                junior:junior,
                staff:staff
            }
            var that = this;
        $.post('syatem/update_Title', params, function (data) {
                //console.log(data);
                if(data.success)
                {
                    console.log('sucess~');
                    that.asSearch();
                    that.updatakey=!this.updatakey;
                }
                else 
                {
                    console.log('error!!!'+data.message);
                }
                //console.log(data.data.content);
                //刷新表格
            })
          },

          //单条删除职称    
          delJobTitle(index, row) {
                //console.log('del'+'id:'+row.id);
                let name = row.name;
                //result_arr[0]=row.id;
                //result_arr[1] = 3;
                var that = this;
                  let params  = 
                   {
                      name:name
                   }
                $.post('/syatem/delete_Title', params, function (data) {
                    //console.log(data);
                    if(data.success)
                    {
                        alert("职称已删除");
                        console.log('sucess~');
                        that.asSearch();
                        that.updatakey=!this.updatakey;
                    }
                    else 
                    {
                        console.log('error!!!'+data.message);
                    }
                    //console.log(data.data.content);
                    //刷新表格
                })
             },
            //批量删除职称
            changSelectUserState() {
                let pid_arr=new Array();
                const LIST = this.multipleSelection;
                var that = this;
            if (LIST.length >= 1) {
              layer.confirm(
                "是否删除选择的职称系列？<br>删除后职称不可再被使用<br>已引用的职称名称会被查询为空白<br>只有用户自定义系列才可以被删除",
                { icon: 3, title: "警告" },
                function (index) {
                  for (let i=0;i<LIST.length;i++)
                {
                  pid_arr[i]=LIST[i].name;
                }
                let pid_arr_data = pid_arr.join(',');
                let params  = 
                   {
                      name:pid_arr_data
                   }
                $.post('/syatem/delete_Title', params, function (data) {
                    //console.log(data);
                    if(data.success)
                    {
                        //alert("职称已删除");
                        layer.msg('职称已删除');
                        //console.log('sucess~');
                        that.asSearch();
                        that.updatakey=!this.updatakey;
                    }
                    else 
                    {
                        console.log('error!!!'+data.message);
                        layer.msg(data.message);
                    }
                    //console.log(data.data.content);
                    //刷新表格
                })
                  //关闭提醒框
                  layer.close(index);
                }
              );
            } else {
              layer.alert("未选择任何职称！");
            }
          },

            //上传职称弹出窗口
            importJobtitleAction() {
            const that = this;
            //打开弹窗
            uploadwindow = layer.open({
            type: 2,
            title: "上传职称",
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: ["533px", "540px"],
            content: "/dialog/general/importjobtitle.html",
            btn:['上传'],
            yes:()=>
            {
              //alert('有未填写的项目!');
              if(!that.testname)
                {
                    layer.msg('没有输入简介说明!')
                }
                else if(!that.testurl)
                {
                    layer.msg('未上传有效的图片!')
                }
                else 
                {
                    //alert('有未填写的项目!');
                    if(that.testname&&that.testurl)
                      {
                        console.log('上传图片对象:',testupload);
                        console.log('上传图片地址:'+this.testurl);
                      }
                      layer.close(uploadwindow);
                }
            },
            cancel: function () {
                      that.testname='';
                      that.testurl='',
                      testupload = null;
                      console.log('cancel...')
            },
                  end: () => {
                          console.log('end...')
                      //this.searchAllScene();
                      //sceneData = {};
                  }
            });
          },

          //页码相关
          handleCurrentChange(val) {
            this.currentPage = val;
          },
          //导入弹窗
          setResponse() {
            if (this.multipleSelection.length == 1) {
              asid = this.multipleSelection[0].asid;
              //打开弹窗
              layer.open({
                type: 2,
                title: "导入",
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ["860px", "600px"],
                content: "../component/main.html",
              });
            } else {
              layer.alert("请勾选单个预案后再点击设置！");
            }
          },
          //查询页码纠正
          deleteCorrect2(data) {
            const totalPage = Math.ceil(data.length / this.pageSize); // 总页数
            this.currentPage =
              this.currentPage > totalPage ? totalPage : this.currentPage;
            this.currentPage = this.currentPage < 1 ? 1 : this.currentPage;
          },
          //手动查询
          asSearchHandle() {
             if(this.name == "")
            {
              this.$message.error("请输入系列名称!");
            }
            else {
              this.asSearch();
              //console.log(this.tableData);
            }
          },
          //查询职称并更新页面
          asSearch() {
            let that = this;
            let params = {
              name: this.name,
              //keyword: this.searchForm.keyword,
              page:this.currentPage,
              size:this.pageSize,
            };
            axios
              .get("/syatem/query_Title", { params })
              .then((res) => {
                let data1 = res.data;
                //console.log(res.data);
                that.tableData = data1.data.content;
                that.totaldata = data1.data.totalElements;
                that.updatakey=!this.updatakey;
                console.log('result:',data1.data.content.length);
                //console.log('一共有:'+data1.data.totalElements+'条数据');
              })
              .catch((err) => {
                console.log(err);
              });
            //let datearr=[];
            //console.log('选中了:'+arr1);
            //console.log('职称类型:'+that.unit);
          },
          toggleSelection(rows) {
            if (rows) {
              rows.forEach((row) => {
                this.$refs.multipleTable.toggleRowSelection(row);
              });
            } else {
              this.$refs.multipleTable.clearSelection();
            }
          },
          handleSelectionChange(val) {
            this.multipleSelection = val;
          },
          //获取所有预案类别
          getCategory() {
            axios
              .get("/assumption/getCategory")
              .then((res) => {
                this.categoryList = res.data.data;
              })
              .catch((err) => {
                console.log(err);
              });
          },
        },
      });
    </script>
  </body>
</html>
